<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>采购订单</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/layui/css/layui.css" rel="stylesheet"/>
</head>
<body bgcolor="red">
<form class="layui-form layui-form-pane" action="" method="post">

    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-btn-container">
                <div class="layui-btn-group">
                    <button type="button" id="btnSave" lay-submit lay-filter="formDemo" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon layui-icon-ok"></i>保存</button>
                    <button type="button" id="btnCancel" class="layui-btn layui-btn-sm layui-btn-warm"><i class="layui-icon layui-icon-return"></i>返回</button>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <input type="radio" name="bRedVouch" value="0" title="蓝字" checked v-model="bRedVouch">
            <input type="radio" name="bRedVouch" value="1" title="红字" v-model="bRedVouch">
        </div>

        <div class="layui-row">
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">单据编号：</label>
                    <div class="layui-input-inline">
                        <input type="text" id="cVouchCode" name="cVouchCode" readonly class="layui-input" v-model="cVouchCode">
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">日期：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="dDate" id="dDate" autocomplete="off" class="layui-input" v-model="dDate">
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">供应商：</label>
                    <div class="layui-input-inline">
                        <input type="hidden" id="iVendorID" name="vendorDTO.iID" v-model="iVendorID" />
                        <input type="text" id="cVenName" name="cVenName" placeholder="请选择供应商" autocomplete="off"
                               class="layui-input" v-model="vendorDTO.cVenName">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">部门：</label>
                    <div class="layui-input-inline">
                        <input type="hidden" id="iDepartmentID" name="departmentDTO.iID" v-model="iDepartmentID" />
                        <input type="text" id="cDepName" name="cDepName" placeholder="请选择部门" autocomplete="off"
                               class="layui-input" v-model="departmentDTO.cDepName" >
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">人员：</label>
                    <div class="layui-input-inline">
                        <input type="hidden" id="iPersonID" name="personDTO.iID" v-model="iPersonID" />
                        <input type="text" name="cPersonName" id="cPersonName" placeholder="请选择人员" autocomplete="off"
                               class="layui-input" v-model="personDTO.cPersonName" >
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">备注：</label>
                    <div class="layui-input-inline">
                        <input type="text" id="cMemo" name="cMemo" class="layui-input" v-model="cMemo">
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<!-- Required Javascript -->
<script src="/js/vue.min.js"></script>
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery.validate.min.js"></script>
<script src="/layui/layui.all.js"></script>
<script src="/layui/extend/tableSelect.js"></script>

<script>
    <%--var data=${data};--%>

    <%--var vv=new Vue ({--%>
    <%--    el:".layui-form",--%>
    <%--    data:data--%>
    <%--});--%>

    var form = layui.form;
    form.render();

    var laydate = layui.laydate;
    laydate.render({
        elem: '#dDate'
    });

    //开始使用
    var tableSelect = layui.tableSelect;
    tableSelect.render({
        elem: '#cVenName',	//定义输入框input对象 必填
        checkedKey: 'iID', //表格的唯一建值，非常重要，影响到选中状态 必填
        searchKey: 'cVenName',	//搜索输入框的name值 默认keyword
        searchPlaceholder: '按供应商名称搜索',	//搜索输入框的提示文字 默认关键词搜索
        table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
            url: '/vendor/getListWithPage',
            cols: [[
                {type: 'radio'}
                , {field: 'iID', width: 80, title: 'ID', sort: true}
                , {field: 'cVenCode', width: 150, title: '供应商编码'}
                , {field: 'cVenName', width: 150, title: '供应商名称', sort: true}
            ]],
            page: true,
            limit: 10
        },
        done: function (elem, data) {
            //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
            //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
            //console.log(data);
            layui.each(data.data, function (index, item) {
                $('#iVendorID').val(item.iID);
                $('#cVenName').val(item.cVenName);
            });
        }
    });
    tableSelect.render({
        elem: '#cDepName',	//定义输入框input对象 必填
        checkedKey: 'iID', //表格的唯一建值，非常重要，影响到选中状态 必填
        searchKey: 'cDepName',	//搜索输入框的name值 默认keyword
        searchPlaceholder: '按部门名称搜索',	//搜索输入框的提示文字 默认关键词搜索
        table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
            url: '/department/getListWithPage',
            cols: [[
                {type: 'radio'}
                , {field: 'iID', width: 80, title: 'ID', sort: true}
                , {field: 'cDepCode', width: 150, title: '部门编码'}
                , {field: 'cDepName', width: 150, title: '部门名称', sort: true}
            ]],
            page: true,
            limit: 10
        },
        done: function (elem, data) {
            //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
            //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
            //console.log(data);
            layui.each(data.data, function (index, item) {
                $('#iDepartmentID').val(item.iID);
                $('#cDepName').val(item.cDepName);
            });
        }
    });
    tableSelect.render({
        elem: '#cPersonName',	//定义输入框input对象 必填
        checkedKey: 'iID', //表格的唯一建值，非常重要，影响到选中状态 必填
        searchKey: 'cPersonName',	//搜索输入框的name值 默认keyword
        searchPlaceholder: '按人员名称搜索',	//搜索输入框的提示文字 默认关键词搜索
        table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
            url: '/person/getListWithPage',
            cols: [[
                {type: 'radio'}
                , {field: 'iID', width: 80, title: 'ID', sort: true}
                , {field: 'cPersonCode', width: 150, title: '人员编码'}
                , {field: 'cPersonName', width: 150, title: '人员名称', sort: true}
            ]],
            page: true,
            limit: 10
        },
        done: function (elem, data) {
            //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
            //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
            //console.log(data);
            layui.each(data.data, function (index, item) {
                $('#iPersonID').val(item.iID);
                $('#cPersonName').val(item.cPersonName);
            });
        }
    });
    //默认值 只需要在触发input上添加 ts - selected="1,2,3" 属性即可 值需与checkedKey对应

    //监听提交
    form.on('submit(formDemo)', function (data) {
        //console.log(data);

        $.ajax({
            type: "POST",
            data: data.field,
            dataTypeString: "json",
            async: false,
            url: "/puorder/create",
            success: function (msg) {
                if (msg.code == "0") {
                    //当你在iframe页面关闭自身时
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                }
            }
        });
        //console.log(data);
        return false;
    });
</script>

<script>
    // $('#btnSave').on('click', function () {
    //     if ($('#btnSave').hasClass("layui-btn-disabled"))
    //     {
    //         return;
    //     }
    //
    //     $("#btnAdd").removeClass("layui-btn-disabled");
    //     $("#btnEdit").removeClass("layui-btn-disabled");
    //     $("#btnDel").removeClass("layui-btn-disabled");
    //     $("#btnSave").addClass("layui-btn-disabled");
    //     $("#btnCancel").addClass("layui-btn-disabled");
    //     $("#btnAddRow").addClass("layui-btn-disabled");
    //     $("#btnDelRow").addClass("layui-btn-disabled");
    // });
    //
    $('#btnCancel').on('click', function () {
        //当你在iframe页面关闭自身时
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    });
</script>
</body>
</html>
